<template>
  <div class="hosts">
    <div style="height: 40px;display: flex;align-items: center;justify-content: right;padding-right: 15px">
      <a-button @click="editBtn" style="margin-right: 20px" :disabled="editBtnStatus">修改</a-button>
      <a-button @click="saveBtn" :disabled="saveBtnStatus">保存</a-button>
    </div>
    <div style="padding-right: 15px;padding-left: 15px;padding-top: 10px">
      <a-textarea :disabled="textStatus" v-model:value="HostsContent" placeholder="Basic usage" :rows="18"/>
    </div>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import {message} from "ant-design-vue";

export default {
  name: "Hosts",
  setup() {
    let HostsContent = ref("")
    onMounted(() => {
      window.go.main.App.GetHosts().then((res) => {
        if (res.error !== ''){
          message.error(res.error)
        }else{
          HostsContent.value = res.data
        }
      })
    })
    let textStatus = ref(true)
    let editBtnStatus = ref(false)
    let saveBtnStatus = ref(true)
    const editBtn = () => {
      editBtnStatus.value = true
      textStatus.value = false
      saveBtnStatus.value = false
    }
    const saveBtn = () => {
      window.go.main.App.SaveHosts(HostsContent.value).then(res=>{
        if (res.error !== ''){
          message.error(res.error)
        }else{
          editBtnStatus.value = false
          saveBtnStatus.value = true
          textStatus.value = true
          message.success(res.data)
        }
      })
    }
    return {
      editBtn,
      editBtnStatus,
      HostsContent,
      textStatus,
      saveBtnStatus,
      saveBtn
    }
  }
}
</script>

<style scoped>
.hosts {
  padding-top: 10px;
}
</style>